<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.0</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>

</head>
<body class="login-bg">

<div class="login">
    <div class="message">xx系统-管理登录</div>
    <div id="darkbannerwrap"></div>

    <button id="userBtn" type="button" 	class="layui-btn layui-btn-primary" onclick="changeView(0)">用户密码登录</button>
    <button id="smsBtn" type="button" 	class="layui-btn" onclick="changeView(1)">短信验证码登录</button>

    <hr class="hr15">

    <form method="post" class="layui-form" id="user" style="display: none;">
        <input name="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
        <hr class="hr15">
        <input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input">
        <hr class="hr15">
        <input value="登录" lay-submit lay-filter="userLogin" style="width:100%;" type="submit">
        <hr class="hr20" >
    </form>

    <form method="post" class="layui-form" id="sms">
        <input name="tel" id="tel" placeholder="电话"  type="text" lay-verify="phone" class="layui-input" >
        <hr class="hr15">
        <input name="code" lay-verify="required" placeholder="验证码"  type="text" style="width:200px" class="layui-input layui-col-sm2 ">
        <div id="send">
            <button type="button" style="margin-left: 10px;"	class="layui-btn layui-btn-xs" onclick="sendSms()" >发送验证码</button>
        </div>

        <hr class="hr15">
        <input value="登录" lay-submit lay-filter="smdLogin" style="width:100%;" type="submit">
        <hr class="hr20" >
    </form>

</div>

<script>
    layui.use('form', function(){
        var form = layui.form;
        //监听提交
        form.on('submit(smdLogin)', function(data){
            $.ajax({
                url:"/test/smsLogin",
                type:"get",
                data:data.field,
                dataType:"json", //返回类型
                success:function(data){

                    layer.alert(data.info);
                    if(data.info=="登录成功"){
                        //访问主页面
                        location.href="/test/index"
                    }
                }
            })
            return false;
        });
    });

    function changeView(num){
        if (num==1){
            console.log(num)
            //显示短信的表单
            $("#sms").show()
            //移除白色按钮样式
            $("#smsBtn").removeClass("layui-btn layui-btn-primary")
            //添加蓝色按钮样式
            $("#smsBtn").addClass("layui-btn")

            //隐藏用户密码登录的表单
            $("#user").hide()
            //移除蓝色按钮样式
            $("#userBtn").removeClass("layui-btn")
            //添加白色色按钮样式
            $("#userBtn").addClass("layui-btn layui-btn-primary")
        }else{
            console.log(num)

            $("#user").show()
            $("#userBtn").removeClass("layui-btn layui-btn-primary")
            $("#userBtn").addClass("layui-btn")


            $("#sms").hide()
            $("#smsBtn").removeClass("layui-btn")
            $("#smsBtn").addClass("layui-btn layui-btn-primary")
        }
    }
    //计时器秒
    var s =5
    //发送短信
    function sendSms(){
        var tel = $("#tel").val()
        $.ajax({
            url:"/test/sendSms",
            type:"get",
            data:{"phone":tel},
            dataType:"json", //返回类型
            success:function(data){
                console.log(data)
                layer.alert(data.info);
            }
        })
        var time = setInterval(function () {
            //禁用发送验证码按钮
            $("#send").html("<button type='button'  class='layui-btn layui-btn-disabled layui-btn-small' >"+s+"秒后发送验证码</button>")
            s--;
            if(s==0){ //倒计时结束
                //清除计时器
                clearInterval(time);
                //启用发送验证码
                $("#send").html("<button type='button' class='layui-btn' onclick=\"sendSms()\">发送验证码</button>")
            }
        },1000)
    }
</script>
</body>
</html>